<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
    <style>
        .content{
            width: 1200px;
            margin: 0 auto;
        }
        .icon{
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
    </style>
    <script src="http://localhost:8081/subDemo/sub"></script>
    <script>
        $(function () {
            // 请求个人信息并显示
            axios.get("/webDemo/servlet/getUser").then(function (info){
                if (info.data.code === 200) {
                    let userInfo = info.data.data
                    $(".icon").attr("src", userInfo.icon)
                    $(".name").html(userInfo.user)
                    $(".email").html(userInfo.email)
                }else {
                    $(".hint").html(info.data.msg)
                }
            })

            $(".fileInput").change(function (e) {
                let file = e.target.files[0]
                if (file){
                    const formData = new FormData();
                    formData.append('fileName', file);
                    axios.post('/webDemo/servlet/setIcon', formData,
                        {
                            headers: {'Content-Type': 'multipart/form-data'},
                        }).then(function (info) {
                        console.log("===", info)
                        let iconUrl = info.data.data
                        console.log("上传成功", iconUrl)
                        $(".icon").attr("src", iconUrl)
                    }).catch(function () {
                        console.log("上传失败")
                    })
                }
            })
            $(".icon").click(function () {
                $(".fileInput").click()
            })
            $(".btn").click(()=>{
                axios.get("http://localhost:8081/subDemo/sub").then((info)=>{
                    $(".result").html(info.data)
                })
            })
        })
    </script>
</head>
<body>
<!--<form method="post" enctype="multipart/form-data"-->
<!--      action="/webDemo/servlet/setIcon">-->
<!--     <input class="file" type="file" name="fileName"/>-->
<!--     <input type="text" name="name"/>-->
<!--     <input type="submit" value="提交">-->
<!--</form>-->

<div class="content">
    <img class="icon" /><br>
    <input class="fileInput" type="file" name="fileName" hidden/>
    <div>
        昵称：<label class="name"></label>
    </div>
    <div>
        邮箱：<label class="email"></label>
    </div>
    <div class="hint"></div>
    
    <div>
        <img src="http://localhost:8081/subDemo/test.png">
        <button class="btn">请求8081</button>
        <label class="result"></label>
    </div>
</div>

</body>
</html>